<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<!--
  onclick="fn()"
-->
 <button  class="btn">普通按钮1</button>
 <button  class="btn">普通按钮2</button>
 <script>

     // 绑定事件的方式  ?  1.onclick="fn()"  2.后绑定事件  获取节点对象然后绑定事件   3.通过事件监听器
     function fn() {
         console.log("单击事件被触发")
     }

      // let btns =  document.getElementsByTagName("button")
      let btns =  document.getElementsByClassName("btn")
      console.log(btns)  //  按钮数组

     //  btns[0].onclick = function () {
     //      console.log("单击事件1被触发")
     //  }
     //
     // btns[0].onclick = function () {
     //     console.log("单击事件2被触发")
     // }

     // 通过事件的监听 完成事件绑定
     btns[0].addEventListener('click',function () {
         console.log("单击事件1被触发")
     })

     btns[0].addEventListener('click',function () {
         console.log("单击事件2被触发")
     })


 </script>
</body>
</html>
